<template>
  <div class="item goBack fix trainPlace">
    <span class="go left"
          :class="cityGoObj"
          @click="selectCityGo">{{cityGo}}</span>
    <span class="ico" @click="exchangeCity">
      <i class="iconfont icon-location-switch"></i>
    </span>
    <span  class="item fix flightdate"
           :class="cityBackObj"
           @click="selectCityBack">{{cityBack}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
  export  default({
    name: 'exchange-city',
    data() {
      return {}
    },
    props: {
      cityGoObj: {
        type: String,
        default: ''
      },
      cityBackObj: {
        type: String,
        default: ''
      },
      cityGo: {
        type: String,
        default: ''
      },
      cityBack: {
        type: String,
        default: ''
      }
    },
    methods: {
      selectCityGo() {
        this.$emit('selectCityGo', 'go')
      },
      selectCityBack() {
        this.$emit('selectCityBack', 'back')
      },
      exchangeCity() {
        this.$emit('exchangeCity', 1)
      }
    }
  })
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .goBack {
    display: flex;
    width: 100%;
    line-height: 3rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
    & > span {
      flex: 1;
      justify-content: center;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    & > span:nth-child(2) {
      flex: 0 0 20%;
    }
  }
  .goBackActive {
    color: #ccc;
  }
  .ico {
    font-size: 1.5rem;
    color: #0094db;
    .icon-location-switch{
      position: relative;
      display: inline-block;
      height: 100%;
      font-size: 1.5rem;
      color: #46a1bb;
      &::after {
        position: absolute;
        content: '';
        left: 50%;
        bottom: -.1rem;
        width: 120%;
        height: .25rem;
        transform: translateX(-50%);
      }
    }
  }

</style>
